﻿/**
 *设备列表页面
 */
class EquipmentList extends UiFramework.UiAbstract{
    onStart(divSelf: HTMLDivElement) {

            //头部div
            var headDiv = document.createElement("div");
            headDiv.style.position = "absolute";
            headDiv.style.width = "100%";
            headDiv.style.height = "7%";
            headDiv.style.lineHeight = "45px";
            headDiv.style.overflow = "hidden";
            this.divSelf.appendChild(headDiv);

            //头部title
            var tit = document.createElement("tit");
            tit.textContent = "设备配置列表";
            tit.style.height = "100%";
            tit.className = "configurationDetailTit";
            headDiv.appendChild(tit);

            //头部返回按钮
            var btnReturn = document.createElement("img");
            btnReturn.src = "picture/return.png";
            btnReturn.className = "configurationDetailReturn";
            headDiv.appendChild(btnReturn);


            //头部右上角全部设备按钮
            var btnHead = document.createElement("input");
            btnHead.type = "button";
            btnHead.value = "删除";
            btnHead.style.top = "15%";
            btnHead.className = "rightTopWhiteButton";
            headDiv.appendChild(btnHead);


            //中间布局div
            var middleDiv = document.createElement("div");
            middleDiv.style.position = "absolute";
            middleDiv.style.top = '7%';
            middleDiv.style.width = "100%";
            middleDiv.style.height = "86%";
            middleDiv.style.background = "#FAF0F0";
            this.divSelf.appendChild(middleDiv);

            //设备图标
            var eqIcon = document.createElement("img");
            eqIcon.src = "picture/shebeiliebiao.png";
            eqIcon.style.background = "white";
            eqIcon.style.position = "absolute";
            eqIcon.style.width = "28%";
            eqIcon.style.height = "20%";
            eqIcon.style.paddingLeft = "36%";
            eqIcon.style.paddingRight = "36%";
            eqIcon.style.paddingTop = "7%";
            eqIcon.style.paddingBottom = "10%";
            eqIcon.style.borderBottom = "1px solid #95989A";
            middleDiv.appendChild(eqIcon);

            //品牌
            var brand = document.createElement("brand");
            brand.textContent = "品牌：飞利浦";
            brand.style.top = "34%";
            //brand.className = "EquipmentListParameter";
            brand.style.position = "absolute";
            brand.style.paddingTop = "6%";
            brand.style.paddingBottom = "6%";
            brand.style.background = "white";
            brand.style.borderBottom = "1px solid #95989A";
            brand.style.borderTop = "1px solid #95989A";
            brand.style.width = "100%";
            brand.style.textAlign = "center";
            middleDiv.appendChild(brand);

            //设备ID
            var id = document.createElement("id");
            id.textContent = "设备ID：321321";
            id.style.top = "45%";
            id.style.position = "absolute";
            id.style.paddingTop = "6%";
            id.style.paddingBottom = "6%";
            id.style.background = "white";
            id.style.borderBottom = "1px solid #95989A";
            id.style.borderTop = "1px solid #95989A";
            id.style.width = "100%";
            id.style.textAlign = "center";
            middleDiv.appendChild(id);

            //设备名
            var eqName = document.createElement("name");
            eqName.style.top = "56%";
            eqName.textContent = "灯";
            eqName.style.position = "absolute";
            eqName.style.paddingTop = "6%";
            eqName.style.paddingBottom = "6%";
            eqName.style.background = "white";
            eqName.style.borderBottom = "1px solid #95989A";
            eqName.style.borderTop = "1px solid #95989A";
            eqName.style.width = "100%";
            eqName.style.textAlign = "center";
            middleDiv.appendChild(eqName);



            //设备位置
            var eqPosition = document.createElement("eqPosition");
            eqPosition.textContent = "位置：卧室";
            eqPosition.style.top = "67%";
            eqPosition.style.paddingTop = "6%";
            eqPosition.style.paddingBottom = "6%";
            eqPosition.style.background = "white";
            eqPosition.style.borderBottom = "1px solid #95989A";
            eqPosition.style.borderTop = "1px solid #95989A";
            eqPosition.style.width = "100%";
            eqPosition.style.textAlign = "center";
            eqPosition.style.position = "absolute";
            middleDiv.appendChild(eqPosition);

            //设备是否关联
            var eqISRelation = document.createElement("eqISRelation");
            eqISRelation.style.top = "78%";
            eqISRelation.textContent = "关联已有的设备：无";
            eqISRelation.style.position = "absolute";
            eqISRelation.style.paddingTop = "6%";
            eqISRelation.style.paddingBottom = "6%";
            eqISRelation.style.background = "white";
            eqISRelation.style.borderBottom = "1px solid #95989A";
            eqISRelation.style.borderTop = "1px solid #95989A";
            eqISRelation.style.width = "100%";
            eqISRelation.style.textAlign = "center";
            middleDiv.appendChild(eqISRelation);

            //更改设备名
            var changeName = document.createElement("input");
            changeName.type = "button";
            changeName.value = "更名 ▼"
            changeName.className = "changeEquipNameSpinner";
            middleDiv.appendChild(changeName);

            var xia1 = document.createElement("eqISRelation");
            xia1.style.top = "71%";
            xia1.textContent = "▼";
            xia1.style.position = "absolute";
            xia1.style.right = '2%';
            xia1.style.width = "10%";
            xia1.style.textAlign = "center";
            middleDiv.appendChild(xia1);

            var xia2 = document.createElement("eqISRelation");
            xia2.style.top = "82%";
            xia2.textContent = "▼";
            xia2.style.position = "absolute";
            xia2.style.right = '2%';
            xia2.style.width = "10%";
            xia2.style.textAlign = "center";
            middleDiv.appendChild(xia2);

            //底部完成按钮
            var ensure = document.createElement("ensure");
            ensure.textContent = "完成";
            ensure.className = "configurationDetailTit";
            ensure.style.paddingBottom = "3.5%";
            ensure.style.paddingTop = "3.5%";
            ensure.style.bottom = '0';
            this.divSelf.appendChild(ensure);

            //更换名字
            changeName.onclick = () => {
                this.openDialog("lampWindow");
            }

            //更换位置
            eqPosition.onclick = () => {
                this.openDialog("posiBedroomWindow");
            }

            //是否有关联的设备
            eqISRelation.onclick = () => {
                this.openDialog("relateExistEquipWindow");
            }


            //删除按钮
            btnHead.onclick = () => {
                this.openDialog("verifyDeleEquipDialog");
            }

            //返回按钮
            btnReturn.onclick = () => {
                this.finish();
            }

            //完成设备配置
            ensure.onclick = () => {
                this.openDialog("finishEquipSetDialog");
            }

    }

    onEnd() {

    }

}

UiMap["equipmentList"] = () => {
    return new EquipmentList();
}